<template>
  <div class="app-container calendar-list-container"
       id="banner"
  >
    <el-table
      :data="banners"
      v-loading.fullscreen="isLoading"
      element-loading-background="rgba(0, 0, 0, 0.3)"
      border
      fit
      highlight-current-row
      style="width: 100%">
      <el-table-column
        label="首页轮播图片"
        min-width="650px"
        align="center">
        <template slot-scope="scope">
         <img :src="scope.row.url" alt="" style="width:100%; max-width:800px; border-radius: 3px">
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200px"
      >
        <template slot-scope="scope">
          <el-button
            type="success"
            size="small"
            v-waves
            @click="showImgDialog(scope.row)"
          >查看</el-button>
          <el-button
            type="primary"
            v-waves
            size="small"
            @click="showDialog(scope.row)"
          >修改</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="修改轮播图"
      :visible.sync="dialogVisible"
      @close="hideDialog"
    >
      <el-upload
        class="banner-uploader"
        name="url"
        ref="upload"
        action="string"
        :show-file-list="false"
        :on-change="handleBannerChange"
        :before-upload="beforeBannerUpload"
        :http-request="handleUpdate"
      >
        <img v-if="tempData.url" :src="tempData.url" class="bannerImg">
        <div v-else class="banner-uploader-img">
          <i class="el-icon-upload "></i>
          <div class="upload-text">点击上传</div>
        </div>
      </el-upload>

      <!--<el-dialog :visible.sync="dialogImgVisible" :append-to-body="true">-->
        <!--<img width="100%" :src="bigImageUrl" alt="">-->
      <!--</el-dialog>-->

      <span slot="footer" class="dialog-footer">
        <el-button v-waves @click="hideDialog">取 消</el-button>
        <el-button v-waves type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogImgVisible"
      @close="hideImgDialog"
      id="img-dialog"
    >
      <img :src="tempData.url" width="100%">
    </el-dialog>
  </div>
</template>

<script>
  import { getBanner, updateBanner } from '@/api/banner'
  import waves from '@/directive/waves/index.js'

  export default {
    name: 'Banner',
    data() {
      return {
        banners: [],
        img: null,
        dialogVisible: false,
        dialogImgVisible: false,
        isLoading: false,
        tempData: {},
        admin_id: null,
        token: null
      }
    },
    created() {
      this.admin_id = this.$store.state.user.admin_id
      this.token = this.$store.state.user.token
      this.getBanner()
    },
    directives: {
      waves
    },
    methods: {
      getBanner() {
        this.isLoading = true
        getBanner(this.admin_id, this.token).then(res => {
          this.banners = res.data
          this.isLoading = false
        })
      },
      showImgDialog(row) {
        this.tempData = Object.assign({}, row)
        this.dialogImgVisible = true
      },
      hideImgDialog() {
        this.dialogImgVisible = false
        this.tempData = {}
      },
      showDialog(row) {
        this.tempData = Object.assign({}, row)
        this.dialogVisible = true
      },
      hideDialog() {
        this.dialogVisible = false
        this.tempData = {}
      },
      handleBannerChange(file) {
        this.tempData.url = file.url
        console.log(file)
      },
      beforeBannerUpload(file) {
        const isLt5M = file.size / 1024 / 1024 < 5

        if (!isLt5M) {
          this.$message({
            message: '上传图片大小不能超过 5MB!',
            type: 'error',
            duration: 3000
          })
        }
        return isLt5M
      },
      submitUpload() {
        if (this.img || this.tempData.img !== '') {
          var formData = new FormData()
          formData.append('url', this.img)
          formData.append('admin_id', this.admin_id)
          formData.append('token', this.token)
          formData.append('banner_id', this.tempData.id)
          this.isLoading = true
          updateBanner(formData).then(res => {
            console.log('上传图片接口-数据', res)
            this.isLoading = false
            this.dialogVisible = false
            this.$refs.upload.clearFiles()
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getBanner()
          }).catch(err => {
            this.$message({
              message: '上传失败，请重新上传',
              type: 'error',
              duration: 3000
            })
            console.log('报错', err)
          })
        } else {
          this.$message({
            message: '请先选择图片',
            type: 'error'
          })
        }
      },
      handleUpdate(data) {
        console.log(data.file)
        this.img = data.file
      }
      // handleBannerSuccess(res) {
      //   console.log(res)
      //   this.isLoading = false
      // },
      // handlePreview(file) {
      //   console.log(file)
      //   this.bigImageUrl = file.url
      //   this.dialogImgVisible = true
      // }
    }
  }
</script>

<style lang="scss" >
 #banner {
   .el-table .cell {
     /*padding-right: 50px;*/
   }
   .el-upload-dragger {
     width: 500px;
     height: 273px;
   }
   .el-upload-dragger .el-icon-upload {
     margin: 80px 0 16px;
   }
   .banner-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     &:hover {
       border-color: #409EFF;
     }
   }
   .banner-uploader-img {
     font-size: 50px;
     padding-top: 80px;
     color: #8c939d;
     width: 500px;
     height: 273px;
     text-align: center;
     .upload-text {
       font-size: 20px;
       margin-top: 5px;
     }
   }
   .bannerImg {
     width: 100%;
     display: block;
   }
 }
</style>

